<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection"
			content="telephone=no,email=no,date=no,address=no">
		<link type="text/css" rel="stylesheet"
			href="../../c-asserts/mui/css/mui.min.css" />
		<link type="text/css" rel="stylesheet"
			href="../../c-asserts/sui/sui1.0.1.css" />
		<link type="text/css" rel="stylesheet"
			href="../../c-asserts/swiper/css/swiper.min.css" />
		<link type="text/css" rel="stylesheet"
			href="../../c-asserts/swiper/swipierlis.css" />
		<style type="text/css">
.stamp {
	width: 360px;
	height: 110px;
	padding: 0 10px;
	position: relative;
	overflow: hidden;
}

.stamp:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
	z-index: -1;
}

.stamp:after {
	content: '';
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
	z-index: -2;
}

.stamp i {
	position: absolute;
	left: 20%;
	top: 45px;
	height: 190px;
	width: 390px;
	background-color: rgba(255, 255, 255, .15);
	transform: rotate(-30deg);
}

.stamp .par {
	float: left;
	padding: 16px 15px;
	width: 220px;
	border-right: 2px dashed rgba(255, 255, 255, .3);
	text-align: left;
}

.stamp .par p {
	color: #fff;
}

.stamp .par span {
	font-size: 50px;
	color: #fff;
	margin-right: 5px;
}

.stamp .par .sign {
	font-size: 34px;
}

.stamp .par sub {
	position: relative;
	top: -5px;
	color: rgba(255, 255, 255, .8);
}

.stamp .copy {
	display: inline-block;
	padding: 21px 14px;
	width: 120px;
	vertical-align: text-bottom;
	font-size: 30px;
	color: rgb(255, 255, 255);
}

.stamp .copy p {
	font-size: 16px;
	margin-top: 15px;
}

.stamp00 {
	background: #F39B00;
	background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px,
		#F39B00 5px );
	background-size: 15px 15px;
	background-position: 9px 3px;
}

.stamp00:before {
	background-color: #F39B00;
}

.stamp01 {
	background: #D24161;
	background: radial-gradient(transparent 0, transparent 5px, #D24161 5px)
		;
	background-size: 15px 15px;
	background-position: 9px 3px;
}

.stamp01:before {
	background-color: #D24161;
}

.stamp-disabled {
	background: #777777;
	background: radial-gradient(transparent 0, transparent 5px, #777777 5px)
		;
	background-size: 15px 15px;
	background-position: 9px 3px;
}

.stamp-disabled:before {
	background-color: #777777;
}
</style>
	</head>
	<body>
		<div class="lisContent">
		</div>
		<div class="footer">
			<p></p>
		</div>
	</body>
	<script type="text/javascript" src="../../c-script/api.js">
</script>
	<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js">
</script>
	<script type="text/javascript"
		src="../../c-script/jquery.lazyload.min.js">
</script>
	<script type="text/javascript" src="../../c-script/public.js">
</script>
	<script type="text/javascript" src="../../c-script/template.js">
</script>
	<script type="text/javascript"
		src="../../c-asserts/swiper/js/swiper.min.js">
</script>
	<script type="text/template" id="temp">
{{each data as val i}}
        <div class="content-item">
            {{if data[i].type == '0' }}
             <div class="stamp stamp00" onclick="chooseDiscount(this,{{val.discountid}},{{val.type}},{{val.quota}});">
                    <div class="par"><p>密逃通用</p><sub class="sign">￥</sub><span class="limit">{{val.displayprice}}</span><sub></sub><p></p></div>
                    <div class="copy">现金劵<p>{{val.issueddate}}<br>{{val.enddate}}</p></div>
                       <i></i>
               </div> 
			   <br>
            {{/if}}
            {{if data[i].type == '2' }}
               {{if priceType <=0 }}
               <div class="stamp stamp01" onclick="chooseDiscount(this,{{val.discountid}},{{val.type}},{{val.quota}});">
                    <div class="par"><p>密逃通用</p><sub class="sign"></sub><span></span><sub></sub><p></p></div>
                    <div class="copy">免单劵<p>{{val.issueddate}}<br>{{val.enddate}}</p></div>
                        <i></i>
               </div>
               {{else}}
               <div class="stamp stamp-disabled">
                    <div class="par"><p>密逃通用</p><sub class="sign"></sub><span></span><sub>当前订单不可用</sub><p></p></div>
                    <div class="copy">免单劵<p><br></p></div>
                        <i></i>
               </div>
               {{/if}}
               <br> 
            {{/if}}
        </div>          
    {{/each}}
</script>
	<script type="text/javascript">

var pageindex; //当前页

var paramdata = {};$(document).ready(function(){
        
       getDatalis(paramdata);  //默认请求

        //下拉刷新
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function( ret, err ){
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            getDatalis(paramdata);
        });

        api.addEventListener({
            name: 'mainlis'
        }, function(ret, err){
            var param = ret.value;
            getDatalis(param);
        });
    
    };
        
	function chooseDiscount(el,discountId,discountType,discountQuota) {
	    if ($api.hasCls(el, 'stamp-disabled')) {
	        return false;
	    }
	    // 从订单进很高的
	    if (paramdata.priceType >= 0) {
	        api.sendEvent({
	            name: 'useDiscount',
	            extra: {
	                discountId: discountId,
	                discountType: discountType,
	                discountQuota: discountQuota,
	            }
	        });
	        api.closeWin({});
	    }
	}
	    
    //post.  请求后台数据
    var tplRender = null;
    function getDatalis(param){
        paramdata = param;
        pageindex = 1;
        param.page = pageindex;
        param.pagesize = pagesize;
        api.showProgress();
        myPostAjax('discount/userQuery.json',{code:getUserCode(),themeId:api.pageParam.themeId}, function (ret, err) {
            api.hideProgress();
            api.refreshHeaderLoadDone();
            if (ret && ret.isSuccess && ret.data) {
            	ret.priceType= -99;
            	if(tplRender == null){tplRender = template.compile($('#temp').html());}
            	if(api.pageParam.themeId != null && api.pageParam.themeId > 0){
            		ret.priceType=api.pageParam.priceType;
            	}
            	paramdata.priceType = ret.priceType;
  
                $('.lisContent').html(tplRender(ret));
                showfooter();
                if(ret.length == pagesize ) scrolltobottom(param);
            }else  hidenfooter();
        })
    }
    //加载更多
    function scrolltobottom(param){
        api.addEventListener({
            name:'scrolltobottom',
            extra:{threshold:0}
        },function(ret,err){
            pageindex++;
            param.page = pageindex;
            myPostAjax('discount/userQuery.json',{code:getUserCode()}, function (ret, err) {
                if(ret && ret.isSuccess && ret.date){
                    ret = reviewdata(ret);
                    $('.lisContent').append(listoString(ret.date, $('#temp').html()));
                    showfooter();
                }
            });
        });
    }

    //对数据的一些简单处理
    function reviewdata(data){
        for (var i = 0; i < data.length; i++) {
            for (var l = 0; l < icontent.length; l++) {
                if (data[i].content == icontent[l].id)
                    data[i].content_ = icontent[l].name + '，';
            }
            for (var j = 0; j < icategory.length; j++) {
                if (data[i].category == icategory[j].id)
                    data[i].content_ += icategory[j].name;
            }
        }
        return data;
    }

    //对footer显示的一些处理  show
    function showfooter(){
        $('.footer').css('display','none');
        $('.content-redtoole').each(function(index,ele){$(ele).css('width',$(ele).attr('data-width')*20 +'px');});
        $(".lazyload").lazyload();
    }

    //对footer隐藏的一些处理   hide
    function hidenfooter(){
        $('.lisContent').html('');
        $('.footer').css('display','block');
        api.removeEventListener({name:'scrolltobottom'});
    }

    
</script>
</html>